<!DOCTYPE html>
<html lang="en">
  <head>
    <meta contentType="html/text" ; charset=" UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>环境线上核查表</title>
    <link rel="stylesheet" href="./css/style.css" />
    <script src="./js/jquery-3.3.1.min.js"></script>
  </head>
  <script type="text/javascript">
    let returnjson;
    var c;
    $(function () {
      $.getJSON("./数据/data.json", function (data) {
        rjson = data;
        var $jsontip = $("#jsonTip");
        var strHtml = ""; //存储数据的变量
        $jsontip.empty(); //清空内容
        for (var p in rjson) {
          //遍历json对象的每个key/value对,p为key
          strHtml += "<fieldset><h2>" + rjson[p].name + "</h2><br><div>";
          var tempObj = rjson[p].problem;
          for (var q in tempObj) {
            strHtml +=
              "<input type='checkbox'onclick='check(this)' id='" +
              p +
              q +
              "' value='-" +
              tempObj[q].value +
              "' >" +
              tempObj[q].id +
              "</input><br><br>";
          }
          strHtml += "</div></fieldset>";
        }
        $jsontip.html(strHtml); //显示处理后的数据
      });
    });
  </script>

  <body>
    <center>
      <h1>环境线上核查表</h1>
      <strong>注意事项：</strong>
      <p>1.,否则信息全部丢失<br /></p>
      <p>
        2.先进行提交，后进行下载，提交之后之前信息被保存，无法进行修改，下载后所有信息清零（！警告）
      </p>
      <p>3.软件出现问题请及时联系开发人员</p>
    </center>
    <form id="myform" name="form1" action="" target="_blank">
      <div class="float1">
        <center>
          <div>
			  <br />
            校区
            <input style="width: 100px;" type="text" name="校区" />
          </div>
          <div>
           日期
            <input style="width: 100px;" type="text" name="日期" />
          </div>
          <h6 id="all_score">共100分</h6>
          <div>
            <input type="button" value="提交" />
          </div>
          <div>
            <input type="button" value="下载" />
          </div>
        </center>
      </div>
      <div id="jsonTip"></div>
    </form>
  </body>
  <script>
    //保存和下载
    var score = 100;
    var time = null;
    var data = new Array();
    var school = null;
    function check(o) {
      score += parseInt(o.checked ? o.value : -o.value); //如果选中就加选中的那个复选框的值，否则就减去
      document.getElementById("all_score").innerHTML = "共" + score + "分";
    }
    function Checked(i) {
      this.i = $("#i").is(": checked ") ? document.form1.i.value : 0;
    }
	
	//定时保存
	
    $("input[value='提交']").click(function () {
      school = document.form1.校区.value;
	  time = document.form1.日期.value;
     
      //输出为数组
      function obj(TIME, SCHOOL, SCORE) {
        this.time = TIME;
        this.school = SCHOOL;
        this.score = SCORE;
        for (var a in rjson) {
          var tempObj = rjson[a].problem;
          for (var d in tempObj) {
            c = a + d;
            this[c] = $("#" + a + d).is(":checked") ? tempObj[d].value : 0;
          }
        }
      }
      var add = new obj(time, school, score);
      data.push(add);
      $("input").prop("checked", false);
	  $("input[type='text']").prop("value", '');
	  save(rjson,time);
    }
	
	
	
	);


//下载键功能
    $("input[value='下载']").click(function () {
		//保存时间
		
		var time1 = null;
		function Time() {
		  var myDate = new Date();
		  myDate.getFullYear(); // 获取完整的年份(4位,1970-????)
		  myDate.getMonth(); // 获取当前月份(0-11,0代表1月)
		  myDate.getDate(); // 获取当前日(1-31)
		  myDate.getHours(); // 获取当前小时数(0-23)
		  myDate.getMinutes(); // 获取当前分钟数(0-59)
		  myDate.getSeconds(); // 获取当前秒数(0-59)
		  var mytime = myDate.toLocaleTimeString(); // 获取当前时间
		  myDate.toLocaleString(); // 获取日期与时间
		  Date.prototype.Format = function (fmt) {
		    // author: meizz
		    var o = {
		      "M+": this.getMonth() + 1, // 月份
		      "d+": this.getDate(), // 日
		      "h+": this.getHours(), // 小时
		      "m+": this.getMinutes(), // 分
		      "s+": this.getSeconds(), // 秒
		    };
		    if (/(y+)/.test(fmt))
		      fmt = fmt.replace(
		        RegExp.$1,
		        (this.getFullYear() + "").substr(4 - RegExp.$1.length)
		      );
		    for (var k in o)
		      if (new RegExp("(" + k + ")").test(fmt))
		        fmt = fmt.replace(
		          RegExp.$1,RegExp.$1.length == 1
		            ? o[k]:("00" + o[k]).substr(("" + o[k]).length)
		        );
		    return fmt;
		  };
		 time1 = new Date().Format("yyyy-MM-dd hh:mm:ss");
		
		}
		Time();
      var worn = confirm("当前保存时间为："+time1+"数据将被输出并且网页缓存清零，是否继续？");
      //表格布局——表头
      if (worn == true) {
        var table = '<table border="1px" cellspacing="0" cellpadding="0">';
        table += "<thead>";
        table += "<tr>";
        table += "<th rowspan=2>序号</th>";
        table += "<th rowspan=2>时间</th>";
        table += "<th rowspan=2>校区</th>";
        for (var p in rjson) {
          table +='<th colspan="' +
            rjson[p].problem.length +'">' +
            rjson[p].name +
            "</th>";
        }
        table += "<th rowspan=2>总分</th>";
        table += "</tr>";
        table += "<tr>";
        for (var p in rjson) {
          var tempObj = rjson[p].problem;
          for (var q in tempObj) {
            table += "<th>" + tempObj[q].id + "</th>";
          }
        }
        table += "</tr>";
        table += "</thead>";
        //表格布局——身体

        var _body = "";
        var c = 0;
        table += "<tbody>";
        for (var row = 0; row < data.length; row++) {
          _body += "<tr>";
          _body += "<td>";
          _body += row + 1;
          _body += "</td>";
          _body += "<td>";
          _body += `${data[row].time}`;
          _body += "</td>";
          _body += "<td>";
          _body += `${data[row].school}`;
          _body += "</td>";
          for (var a in rjson) {
            var tempObj = rjson[a].problem;
            for (var d in tempObj) {
              c = a + d;
              _body += "<td>";
              _body += `${data[row][c]}`;
              _body += "</td>";
            }
          }
          _body += "<td>";
          _body += `${data[row].score}`;
          _body += "</td>";
          _body += "</tr>";
        }
        table += _body;
        table += "</tbody>";
        table += "</table>";
        excel(table, time1 + "环境线上核查表.xls"); //输出文件
        function excel(data, filename) {
          var html = null;
          html +=
            "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel'xmlns = 'http://www.w3.org/TR/REC-html40' > ";
          html +=
            '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
          html +=
            '<meta http-equiv="content-type" content="application/vnd.ms-excel';
          html += '; charset=UTF-8">';
          html += "<head>";
          html += "</head>";
          html += "<body>";
          html += data;
          html += "</body>";
          html += "</html>";
          var uri =
            "data:application/vnd.ms-excel;charset=utf-8," +
            encodeURIComponent(html);
          var link = document.createElement("a");
          link.href = uri;
          link.style = "visibility:hidden";
          link.download = `${filename}`;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
        data.length = 0;
      } else {
      }
    });
    document.write(data);
  </script>
  
  <script>
	  function save(rjson,time){
		var table = '<table border="1px" cellspacing="0" cellpadding="0">';
        table += "<thead>";
        table += "<tr>";
        table += "<th rowspan=2>序号</th>";
        table += "<th rowspan=2>时间</th>";
        table += "<th rowspan=2>校区</th>";
        for (var p in rjson) {
          table +='<th colspan="' +
            rjson[p].problem.length +'">' +rjson[p].name +"</th>";
        }
        table += "<th rowspan=2>总分</th>";
        table += "</tr>";
        table += "<tr>";
        for (var p in rjson) {
          var tempObj = rjson[p].problem;
          for (var q in tempObj) {
            table += "<th>" + tempObj[q].id + "</th>";
          }
        }
        table += "</tr>";
        table += "</thead>";
        //表格布局——身体

        var _body = "";
        var c = 0;
        table += "<tbody>";
        for (var row = 0; row < data.length; row++) {
          _body += "<tr>";
          _body += "<td>";
          _body += row + 1;
          _body += "</td>";
          _body += "<td>";
          _body += `${data[row].time}`;
          _body += "</td>";
          _body += "<td>";
          _body += `${data[row].school}`;
          _body += "</td>";
          for (var a in rjson) {
            var tempObj = rjson[a].problem;
            for (var d in tempObj) {
              c = a + d;
              _body += "<td>";
              _body += `${data[row][c]}`;
              _body += "</td>";
            }
          }
          _body += "<td>";
          _body += `${data[row].score}`;
          _body += "</td>";
          _body += "</tr>";
        }
        table += _body;
        table += "</tbody>";
        table += "</table>";
        excel(table,  "环境线上核查表.xls"); //输出文件
        function excel(data, filename) {
          var html = null;
          html +=
            "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel'xmlns = 'http://www.w3.org/TR/REC-html40' > ";
          html +=
            '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
          html +=
            '<meta http-equiv="content-type" content="application/vnd.ms-excel';
          html += '; charset=UTF-8">';
          html += "<head>";
          html += "</head>";
          html += "<body>";
          html += data;
          html += "</body>";
          html += "</html>";
          var uri =
            "data:application/vnd.ms-excel;charset=utf-8," +
            encodeURIComponent(html);
          var link = document.createElement("a");
          link.href = uri;
          link.style = "visibility:hidden";
          link.download = `${filename}`;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }}
  </script>
</html>
